<template>
    <div>
        <table class="table table-bordered">
      <tbody>
        <tr>
        <td>名称</td>
        <td>
          <input type="text" v-model="form.name" />
        </td>
      </tr>
      <tr>
        <td>范围</td>
        <td>
          <select v-model="form.fanwei">
                <option value="请选择">请选择</option>
                <option>线上</option>
                <option>线下</option>
                <option>线上线下</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>图片</td>
        <td>
          <img :src="form.tupian" style="display: ''; max-width: 100px" />
          <input type="file" style="display: ''" id="file" @change="Tupian" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
            <button @click="Add">添加</button>
        </td>
      </tr>
      </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const form = reactive({
  id: 0,
  name: "",
  pwd: "",
  fanwei: "请选择",
  tupian: "",
});

const Add=()=>{
    if(form.name.length>10){
        alert("名称不能超过十个字符");
        return;
    }
    if(!form.name){
        alert("名称不能为空");
        return;
    }

    axios.post("https://localhost:7015/api/mendian/Addmen",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
           // router.push("showmen");
        }
        else
        {
            alert("添加失败");
            return;
        }
    })
}




const Tupian=(e:any)=>{
     var formData=new FormData();
     var file=e.target.files[0];
     formData.append("file",file)
     axios.post("https://localhost:7015/api/mendian/Pic",formData).then(res=>{
        form.tupian=res.data;
     }).catch(err=>{
        console.log(err);
     })
}




</script>

<style scoped>

</style>